<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass, index) in itemClasses" :class="itemClass" class="star-item"></span>
    </div>
</template>

<script>
    const LENGTH = 5;
    const CLS_ON = 'on';    //全部点亮
    const CLS_HALF = 'half';        //点亮一半
    const CLS_OFF = 'off';          //未点亮
  export default {
    props:{
        //五星大小
        size:{
            type:Number
        },
        //分数
        score:{
            type: Number
        }
    },
	data () {
		return {

		}
	},
    computed:{
        starType(){
            return 'star-'+this.size;
        },
        itemClasses(){
            let result = [];
            let score = Math.floor(this.score*2)/2;
            let hasDecimal = score % 1 !==0;
            let integer = Math.floor(score);
            for (var i = 0; i < integer; i++) {
                result.push(CLS_ON);
            }
            if(hasDecimal){
                result.push(CLS_HALF);
            }
            while(result.length<LENGTH){
                result.push(CLS_OFF);
            }
            return result;
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.star{font-size: 0;}
    .star .star-item { display: inline-block; background-repeat: no-repeat;}
    .star.star-36 .star-item { width: 15px; height: 15px; margin-right: 6px; background-repeat: no-repeat; background-size: 15px 15px; }
    .star.star-36 .star-item:last-child {  margin-right: 0;}
    .star.star-36 .star-item.on {background-image: url('images/star36_on@2x.png');}
    .star.star-36 .star-item.half { background-image: url('images/star36_half@2x.png');}
    .star.star-36 .star-item.off {  background-image: url('images/star36_off@2x.png'); }
</style>
